<template>
  <div class="split-screen-example">
    <div id="map" class="map-container"></div>
    
    <div class="controls-panel">
      <div class="panel-header">
        <h3>🖥️ 分屏控制</h3>
        <div class="status-indicators">
          <div class="status-item">
            <span class="status-label">分屏：</span>
            <span :class="['status-value', isSplitMode ? 'active' : 'inactive']">
              {{ isSplitMode ? '已启用' : '未启用' }}
            </span>
          </div>
          <div class="status-item" v-if="isSplitMode">
            <span class="status-label">同步：</span>
            <span :class="['status-value', syncEnabled ? 'active' : 'inactive']">
              {{ syncEnabled ? '已启用' : '已禁用' }}
            </span>
          </div>
        </div>
      </div>
      
      <div class="control-section">
        <h4>分屏模式</h4>
        <div class="button-group">
          <el-button 
            type="primary" 
            @click="enableSplitScreen" 
            :disabled="isSplitMode"
            size="small"
          >
            启用分屏
          </el-button>
          <el-button 
            type="danger" 
            @click="disableSplitScreen" 
            :disabled="!isSplitMode"
            size="small"
          >
            禁用分屏
          </el-button>
          <el-button 
            type="warning" 
            @click="toggleSplitScreen"
            size="small"
          >
            {{ isSplitMode ? '关闭' : '开启' }}分屏
          </el-button>
        </div>
      </div>
      
      <div class="control-section" v-if="isSplitMode">
        <h4>同步控制</h4>
        <div class="button-group">
          <el-button 
            type="success" 
            @click="enableSync" 
            :disabled="syncEnabled"
            size="small"
          >
            启用同步
          </el-button>
          <el-button 
            type="warning" 
            @click="disableSync" 
            :disabled="!syncEnabled"
            size="small"
          >
            禁用同步
          </el-button>
          <el-button 
            type="info" 
            @click="toggleSync"
            size="small"
          >
            {{ syncEnabled ? '关闭' : '开启' }}同步
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "../../../packages/index.js";

export default {
  name: "SplitScreenExample",
  data() {
    return {
      map: null,
      isSplitMode: false,
      syncEnabled: true,
    };
  },
  mounted() {
    this.initMap();
  },
  beforeUnmount() {
    if (this.map) {
      this.map.destroy();
    }
  },
  methods: {
    initMap() {
      // 初始化地图，传入 style2 配置但默认不启用分屏
      this.map = new Map("map", {
        style: "https://demotiles.maplibre.org/style.json",
        style2: "https://api.maptiler.com/maps/basic/style.json?key=qC0veBxoTx1YwVioOuvc", // 右侧地图样式
        scene: {
          center: { lng: 116.3974, lat: 39.9093, pitch: 0 },
          zoom: 3,
        },
        controller: ["globe", "showZoom", "showCompass"],
        type: "mercator",
      });

      // 监听分屏状态变化
      this.updateSplitStatus();
    },

    enableSplitScreen() {
      this.map.enableSplitScreen();
      this.updateSplitStatus();
    },

    disableSplitScreen() {
      this.map.disableSplitScreen();
      this.updateSplitStatus();
    },

    toggleSplitScreen() {
      this.isSplitMode = this.map.toggleSplitScreen();
      this.updateSplitStatus();
    },

    enableSync() {
      this.map.enableSplitSync();
      this.syncEnabled = true;
    },

    disableSync() {
      this.map.disableSplitSync();
      this.syncEnabled = false;
    },

    toggleSync() {
      this.syncEnabled = this.map.toggleSplitSync();
    },

    updateSplitStatus() {
      this.isSplitMode = this.map.isSplitMode();
      if (this.isSplitMode) {
        this.syncEnabled = true; // 默认启用同步
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.split-screen-example {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
}

.controls-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 280px;
  max-width: 350px;
}

.panel-header {
  margin-bottom: 20px;
  
  h3 {
    margin: 0 0 12px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
  }
}

.status-indicators {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  
  .status-label {
    color: #7f8c8d;
  }
  
  .status-value {
    font-weight: 600;
    
    &.active {
      color: #28a745;
    }
    
    &.inactive {
      color: #dc3545;
    }
  }
}

.control-section {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  h4 {
    margin: 0 0 12px 0;
    color: #5a6c7d;
    font-size: 14px;
    font-weight: 600;
  }
}

.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

// 响应式设计
@media (max-width: 768px) {
  .controls-panel {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    min-width: auto;
  }
  
  .button-group {
    gap: 6px;
  }
}
</style> 